
<template>
    <div class="keyboard_pop" @click.self="show=false" v-if="show">
        <ul class="keyboard">
            <li v-for="(key,index) in keyList" :key="index" track-by="$index" :class="{delete: key === '删除', capslock: key === 'Caps',  space: key === '空格',  capsed: (key === '大小写') && hasCapsed }" v-text="key" @click="clickKey(key)"></li>
        </ul>
    </div>
</template>
<script>
export default {
  props:["isShows","keyvalues",],

  data () {
    return {
      show: false,
      keyList: [],
      normalKeyList: [],
      capsedKeyList: [],
      capsedKeyList2: [],
      hasCapsed: false,
      keyvalue: ''
    }
  },
  created () {
    this.ready()
  },
  watch: {
    keyvalues (val) {
        console.log(22222222222,val)
      
    },
    isShows (val) {
        console.log(val)
        console.log(this.show)
        if(this.show == val){
          
            this.show = !this.show
        }else{
          
            this.show = val
        }
        if(val==false){
          this.keyvalue ='';
        }
      
    },
  },
  methods: {
    clickKey (key) {
      switch (key) {
        case '删除':
          let kbt = String(this.keyvalues)
          console.log(this.keyvalues)
          console.log(kbt)
          if(kbt=='undefined'){
            this.keyvalues ='';
          }else if(kbt=='' || kbt==null){
            this.keyvalue ='';
            this.keyvalues ='';
          }else{
            console.log(kbt)
            if(kbt.length==1){
              this.keyvalue = '';
              this.$emit("keyvaluess", '');
              console.log(123123,this.keyvalues)
            }else{
              this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : ''
            console.log(this.keyvalue) 
            }

          }
          // if(kbt==''){}
          console.log(this.keyvalue)
          break
 
        case '空格':
          this.keyvalue += ' '
          break
 
        case '大小写':
          this.hasCapsed = !this.hasCapsed
          this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList
          break
        case '数字':
          this.hasCapsed = !this.hasCapsed
          this.keyList = this.hasCapsed ? this.capsedKeyList2 : this.normalKeyList
          break
        case '字母':
          this.hasCapsed = !this.hasCapsed
          this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList
          break
 
        default:
          let kbts = String(this.keyvalues);
          this.keyvalue = kbts;
          this.keyvalue += key
          break
      }
      // console.log(this.keyvalue)
      this.$emit('updatekey', this.keyvalue)
    },
    ready () {
      let normalKeyList = [
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
        'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',
        'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',
        'z', 'x', 'c', 'v', 'b', 'n', 'm', '-',
        '大小写', "数字", '空格', '删除'
      ]
 
      let capsedKeyList = [
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-',
        '大小写', "数字", '空格', '删除'
      ]
      let capsedKeyList2 = [
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
        "字母", '空格', '删除'
      ]
 
      this.keyList = this.normalKeyList = normalKeyList
      this.capsedKeyList = capsedKeyList
      this.capsedKeyList2 = capsedKeyList2
    }
  }
 
}
</script>
 
<style lang="less" scoped>
.keyboard_pop{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 33333;
    height: 100vh;
}
.keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    // width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 50px 75px;
    width: 900px;
    height: 150px;
    li {
        float: left;
        text-align: center;
        // text-indent: 3em;
        margin: 0 10px 10px 0;
        width: 80px;
        height: 25px;
        line-height: 25px;
        background: #fff;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;
 
        &:hover {
            position: relative;
            cursor: pointer;
            background: #03BA82;
            color: #fff;
        }
        &:active {
            top: 1px;
            left: 1px;
        }
    }
    li:nth-child(n+11){
        margin-left: 15px;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 10px;
    }
    li:nth-child(38){
      width: 150px;
      text-indent: 2.5em;
    }
    .delete {
        width: 100px;
    }
    .capslock {
        // clear: left;
        width: 200px;
    }
    .space {
        width: 140px;
 
    }
    .capsed {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
    }
}
</style>